<template>
	<view class="content">
		<view class="top_banner">
			<img class="image" src="/static/img/bg/sellerbg.jpg"/>
			<view class="seller_info">
				<view class="relative">
					<view class="logo"><img :src="data.seller_logo"/></view>
					<view class="sellername">{{data.name}}</view>
				</view>
			</view>
		</view>
		
		<view class="tj-sction">
			<view class="user_account circle-orange">
				<view class="coolc icon-rmb"></view>
				<text class="title">帐户余额</text>
				<text class="num">¥15,9900</text>
				<view class="btn_box">
					<navigator url="/pages/sellerAdmin/withdraw" class="btnfill">提现</navigator>
				</view>
			</view>
			<view class="user_account circle-cyan">
				<view class="coolc icon-gift"></view>
				<navigator class="title">近7日收入</navigator>
				<navigator class="num">¥1500</navigator>
				<view class="btn_box">
					<navigator url="/pages/sellerAdmin/commission_log" class="btn">明细</navigator>
				</view>
			</view>
		</view>
		
		<!-- 订单 -->
		<view class="order-section">
			<navigator class="order-item" url="/pages/sellerAdmin/order_list">
				<text class="coolc zi_1 icon-tuanduicankaoxian-"></text>
				<text>全部订单</text>
			</navigator>
			<navigator class="order-item" url="/pages/sellerAdmin/order_list">
				<view class="snum">19</view>
				<text class="coolc zi_1 icon-dingdandaifukuan"></text>
				<text>待付款</text>
			</navigator>
			<navigator class="order-item" url="/pages/sellerAdmin/order_list">
				<view class="snum">2</view>
				<text class="coolc zi_2 icon-icon3"></text>
				<text>待发货</text>
			</navigator>
			<navigator class="order-item" url="/pages/sellerAdmin/order_list">
				<text class="coolc zi_2 icon-pinglun"></text>
				<text>待评论</text>
			</navigator>
			<navigator class="order-item" url="/pages/sellerAdmin/order_list">
				<text class="coolc zi_2 icon-shouhoutuikuan"></text>
				<text>退款/售后</text>
			</navigator>
		</view>
		
		<view class="bingtitle">店铺数据</view>
		<view class="databox">
			<view class="lis"><b>11</b><span>今日订单</span></view>
			<view class="lis"><b>0</b><span>退款中</span></view>
			<view class="lis"><b>0</b><span>待付款</span></view>
			<view class="lis"><b>0</b><span>待发货</span></view>
			<view class="lis"><b>0</b><span>待评价</span></view>
			<view class="lis"><b>0</b><span>出售中的产品</span></view>
			<view class="lis"><b class="red">0</b><span>待审核产品</span></view>
			<view class="lis"><b class="red">0</b><span>库存告急</span></view>
			<view class="lis"><b class="red">0</b><span>店铺收藏</span></view>
			
			<view class="lis"><b>0</b><span>今日总成交</span></view>
			<view class="lis"><b>0</b><span>今日PC成交</span></view>
			<view class="lis"><b>0</b><span>今日无线成交</span></view>
			
			<view class="lis"><b>0</b><span>今日PC订单</span></view>
			<view class="lis"><b>0</b><span>今日无线订单</span></view>
			<view class="lis"><b>0</b><span>昨日全店成交</span></view>
			
			<view class="lis"><b>0</b><span>今日访客</span></view>
			<view class="lis"><b>0</b><span>今日PC访客</span></view>
			<view class="lis"><b>0</b><span>今日无线访客</span></view>
		</view>
		
		<view class="bingtitle">最新审核产品</view>
		<scroll-view scroll-x class="h-list">
			<navigator class="goods_user" url="/pages/goods/product">
				<img src="~@/static/por5.jpg"/>
				<view class="product-title">计时系列 5180/1G-010 机械男表</view>
				<view class="product-price">
					<text class="product-price-original">￥1780.00</text>
				</view>
			</navigator>
			<navigator class="goods_user" url="/pages/goods/product">
				<img src="~@/static/por6.jpg"/>
				<view class="product-title">计时系列 5180/1G-010 机械男表</view>
				<view class="product-price">
					<text class="product-price-original">￥1780.00</text>
				</view>
			</navigator>
			<navigator class="goods_user" url="/pages/goods/product">
				<img src="~@/static/por5.jpg"/>
				<view class="product-title">计时系列 5180/1G-010 机械男表</view>
				<view class="product-price">
					<text class="product-price-original">￥1780.00</text>
				</view>
			</navigator>
			<navigator class="goods_user" url="/pages/goods/product">
				<img src="~@/static/por6.jpg"/>
				<view class="product-title">计时系列 5180/1G-010 机械男表</view>
				<view class="product-price">
					<text class="product-price-original">￥1780.00</text>
				</view>
			</navigator>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {
					"name": "香奈儿（Chanel）旗舰店",
					"seller_logo": "/static/baner_logo_2.jpg",
				},
				
			}
		},
		onLoad() {
			this.loadData();
			setTimeout(()=> {
				this.renderImage = true;
			},300);
			
			uni.setNavigationBarTitle({
				title: this.data.name
			});
		},
		methods:{
			async loadData() {
				
			}
		}
	}
</script>

<style lang='scss'>
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background:$bgcolor_white;
	}
	.top_banner { 
		width:100%; height:auto; display:table; position:relative; border-bottom:1px solid #eeeeee;
		
		.image { width:100%; }
		.seller_info {
			width:100%; height:140upx; background:url('/static/img/bg/seller_top_bg.png') repeat-x; text-align:center; display:flex; justify-content:center; background-size:auto 100%; position:absolute; left:0px; bottom:0px; right:0px; 
			.relative { width:100%; height:160upx; }
			.logo {
				width:140upx; height:140upx; border-radius:140upx; overflow:hidden; text-align:center; display:flex; justify-content:center; position:absolute;	left:50%; top:0px; margin-left:-70upx; margin-top:-70upx; box-shadow:0px 0px 4px #ccc;
				img { widows:auto!important; height:140upx; }
			}
		}
		.sellername { width:100%; height:40upx; line-height:40upx; font-size:$font-base; text-align:center; position:absolute; left:0px; bottom:20px; }
	}
	.tj-sction { 
		width:750upx; height:auto; display:table; padding-top:30upx; padding-left:30upx; padding-right:30upx; padding-bottom:10upx; background:$bgcolor_white;
		
		.user_account { width:336upx; height:210upx; padding-top:20upx; float:left; border-radius:10upx; padding-left:90upx; position:relative; }
		.user_account .coolc { width:50upx; height:50upx; line-height:50upx; font-size:32upx; color:#f19400; left:20upx; top:20upx; text-align:center; position:absolute; border-radius:50upx; background:rgba(255,255,255,.4); }
		.user_account .title { width:100%; height:50upx; line-height:50upx; display:block; font-size:28upx; }
		.user_account .num { width:100%; height:60upx; line-height:60upx; display:block; font-size:38upx; font-weight:bold; }
		.user_account .btn_box { width:100%; height:53upx; display:block; padding-top:8upx; }
		.user_account .btn_box .btnfill { height:46upx; line-height:46upx; border-radius:46upx; padding:0 25upx; display:block; float:left; margin-right:10upx; font-size:24upx; background:#ffffff; color:#f19400; }
		.user_account .btn_box .btn { height:46upx; line-height:44upx; border-radius:46upx; border:1px solid #ffffff; padding:0 25upx; display:block; float:left; margin-right:10upx; font-size:24upx; color:#ffffff; }
		.circle-cyan { float:right; }
		.circle-cyan .coolc { color:#2496d8; font-size:28upx; }
		.circle-cyan .btn_box .btnfill { color:#2496d8; }
	}
	.order-section{
		@extend %section;
		padding:20upx 0 32upx 0; margin-bottom:15upx; background:$bgcolor_white;
		.order-item{
			@extend %flex-center;
			font-size: $font-sm;
			color:$font-color-dark; position:relative;
		}
		.snum { width:36upx; height:36upx; line-height:36upx; font-size:20upx; border-radius:36upx; right:-5upx; top:6upx; position:absolute; display:block; background:#b50048; color:#ffffff; text-align:center; }
		.coolc{ color:#999999; }
		.zi_1 { font-size:54upx; }
		.zi_2 { font-size:52upx!important; }
	}
	.bingtitle { width:100%; height:90upx; line-height:90upx; background:$bgcolor_white; padding:0 26upx; font-size:$font-lg + 4upx; border-bottom:1px solid #eeeeee; }
	.databox {
		width:100%; height:auto; display:table; padding:0 26upx 26upx 26upx; background:$bgcolor_white; margin-bottom:15upx;
		.lis {
			width:33.33%; float:left; padding:26upx 0 0 0; text-align:center;
			b { width:100%; display:block; font-size:$font-lg; }
			span { width:100%; display:block; font-size:$font-sm; color:$font-color-ccc; }
		}
	}
	.h-list{
		white-space:nowrap; padding:10upx 30upx 0; background:$bgcolor_white;
		.goods_user{
			display:inline-block; width:260upx; height:auto; border:1px solid #eee; border-radius:5px; overflow:hidden; margin:18upx 20upx 15upx 0; padding-bottom:18upx;
		}
		.goods_user:nth-last-child(1) { margin-right:0upx; }
		.goods_user img { width:260upx; height:260upx; }
		.goods_user .product-title { width:220upx; color:#666666; display:block; margin:0 auto; font-size:24upx; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
		.goods_user .product-price { margin-top:0px; padding:0 20upx; color:$vui_bgcolor; }
	}
</style>